<template>
  <!-- <div> -->
  <div class="barcharts">
    <div id="bar1"></div>
  </div>
  <!-- </div> -->
</template>

<script setup lang="ts">
const echart = inject("echart");
let myChart = null;

const props = defineProps({
  width: {
    type: String,
    default: "100%"
  },
  height: {
    type: String,
    default: "300px"
  }
});

onMounted(() => {
  initEcharts();
  getData();
});
onUnmounted(() => {
  if (myChart.isDisposed) {
    myChart.clear();
    myChart.dispose();
    myChart = null;
  }
});

const getData = () => {
  renderEcharts();
};
const initEcharts = () => {
  myChart = echart.init(document.getElementById("bar1"));
};
const renderEcharts = () => {
  myChart.setOption({
    // backgroundColor: "",
    title: {
      text: "Top20 热门城市旅游",
      left: "25%",
      textStyle: {
        fontSize: 20,
        color: "rgba(249, 249, 249, 1)"
      },
      subtextStyle: {
        fontSize: 20
      },
      show: true
    },
    grid: {
      // top: "10%",
      height: "90%",
      width: "80%",
      left: "16%",
      right: "20%"
    },
    tooltip: {
      show: true,
      trigger: "axis",
      axisPointer: {
        lineStyle: {
          color: "#57617B" //显示竖线颜色
        }
      },
      backgroundColor: "rgba(128, 128, 128, 0.9)", //tooltip背景色
      borderColor: "#2BEDF6", //tooltip边框颜色
      borderWidth: 2,
      formatter: function(param) {
        //自定义tooltip内容
        var text = "";
        text +=
          '<div style="display:flex;flex-direction:row;  background-image: linear-gradient(135deg,#0013BC,red); background-clip:text;-webkit-background-clip:text;  color: transparent;">' +
          '<div style="display:flex;flex-direction:column;">' +
          "<span>" +
          // "平均薪资"
          param[0].name +
          "</span>" +
          "<span>" +
          "旅游人数：" +
          param[0].value +
          "人</span>";
        ("</div>");
        ("</div>");
        return text;
      }
    },
    xAxis: {
      type: "value",
      position: "top",
      // name: "城市",
      show: true,
      axisTick: {
        show: true,
        alignWithLabel: true,
        inside: true
        //  alignWithLabel:true
      },
      axisLabel: {
        show: true,
        // textStyle: {
        color: "#c3dbff", //更改坐标轴文字颜色
        fontSize: 10 //更改坐标轴文字大小
        // },
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#58CFFB",
          width: 1 //这里是为了突出显示加上的
        }
      },
      splitLine: {
        show: false
      }
    },
    yAxis: {
      show: true,
      type: "category",
      name: "城市", //y轴名称
      nameLocation: "start",
      nameTextStyle: {
        color: "#D8D8D9",
        // fontStyle: "normal",
        // fontWeight: "bold",
        // verticalAlign: "bottom",
        fontSize: 12,
        lineHeight: 10,
        padding: [-30, -30, 10, -30]
      },
      axisPointer: {
        //坐标轴指示器，坐标轴触发有效，
        type: "shadow", //默认为line，line直线，cross十字准星，shadow阴影
        crossStyle: {
          color: "#fff"
        }
      },

      //升序
      inverse: true,
      axisLabel: {
        // show: true,
        // textStyle: {
        color: "#c3dbff", //更改坐标轴文字颜色
        fontSize: 14 //更改坐标轴文字大小
        // },
      },
      axisLine: {
        lineStyle: {
          color: "#58CFFB",
          width: 1
        }
      },
      data: [
        "北京",
        "长沙",
        "成都",
        "大连",
        "佛山",
        "福州",
        "广州",
        "杭州",
        "合肥",
        "南京",
        "宁波",
        "上海",
        "深圳",
        "苏州",
        "无锡",
        "武汉",
        "西安",
        "郑州",
        "重庆",
        "珠海",
        "甘肃"
      ]
    },
    series: [
      {
        data: [
          3002,
          555,
          1442,
          273,
          318,
          221,
          2614,
          1454,
          464,
          1414,
          307,
          4462,
          3740,
          845,
          366,
          1686,
          685,
          227,
          464,
          214,
          322
        ],
        //柱状图自动排序，排序自动让Y轴名字跟着数据动
        realtimeSort: true,
        type: "bar",
        barWidth: 11,
        barGap: "10%" /*多个并排柱子设置柱子之间的间距*/,
        barCategoryGap: "20%" /*多个并排柱子设置柱子之间的间距*/,
        // itemStyle: {
        //   // 方法一的写法
        //   color: {
        //     type: "linear",
        //     x: 0, //右
        //     y: 0.2, //下
        //     x2: 0.7, //左
        //     y2: 1, //上
        //     colorStops: [
        //       {
        //         offset: 0,
        //         color: "pink", // 0% 处的颜色
        //       },
        //       {
        //         offset: 0.2,
        //         color: "#9878f7", // 70% 处的颜色
        //       },
        //       {
        //         offset: 0.7,
        //         color: "#2378f7", // 70% 处的颜色
        //       },
        //       {
        //         offset: 1,
        //         color: "#83bff6", // 100% 处的颜色
        //       },
        //     ],
        //   },
        // },
        // 方法二
        itemStyle: {
          borderRadius: [0, 20, 20, 0],
          color: new echart.graphic.LinearGradient(0, 0, 1, 0, [
            {
              offset: 0,
              color: "#005eaa"
            },
            {
              offset: 0.5,
              color: "red"
            },
            {
              offset: 1,
              color: "yellow"
            }
          ])
        }
      }
    ]
  });
};
window.addEventListener("resize", () => {
  //监听浏览器大小去改变图表尺寸
  myChart.resize();
});
</script>

<style scoped>
.barcharts {
  height: 100%;
  width: 100%;
  /* height: 500px; */
  /* background-color: aliceblue; */
}

#bar1 {
  height: 100%;
  width: 100%;
  /* background-color: aliceblue; */
}
</style>